<template>
  <el-container>
    <el-aside width="200px">
      <avue-tree :option="treeOption"
                 :data="treeData"
                 @node-click="nodeClick"></avue-tree>
    </el-aside>
    <el-main>
      <avue-crud :data="loadData"
                 :option="loadOption"
                 v-model="obj"></avue-crud>
    </el-main>
  </el-container>
</template>


<script>
export default {
  data () {
    return {
      obj: {},
      treeData: [{
        value: 0,
        label: '一级部门',
        children: [
          {
            value: 1,
            label: '一级部门1',
          }
        ]
      }],
      treeOption: {
        defaultExpandAll: true,
        formOption: {
          labelWidth: 100,
          column: [{
            label: '自定义项',
            prop: 'test'
          }],
        },
        props: {
          labelText: '标题',
          label: 'label',
          value: 'value',
          children: 'children'
        }
      },
      loadData: [],
      loadData1: [
        {
          name: '张三',
          sex: '男'
        }
      ],
      loadData2: [
        {
          name: '李四2',
          sex: '女'
        }
      ],
      loadOption: {
        column: [
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '性别',
            prop: 'sex'
          }
        ]
      }
    }
  },
  created () {
    this.loadData = this.loadData1;
  },
  methods: {
    nodeClick (data) {
      if (data.value == 0) {
        this.loadData = this.loadData1;
      } else if (data.value == 1) {
        this.loadData = this.loadData2;
      }
      this.$message.success(JSON.stringify(data))
    }
  }
}
</script>